<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .danMu {
            position: absolute;
            color: red;
            left: 600px;
        }
    </style>
</head>

<body>



    <input type="text" id="words">
    <input type="button" id="btn" value="点击发送">
</body>
<script>





    var btn = document.querySelector('#btn')
    btn.onclick = function () {
        // console.log(1);
        // 创建一个span
        var span = document.createElement('span')
        console.log(document.querySelector('#words'));  // null
        span.innerHTML = document.querySelector('#words').value

        // 同时清空words里面的文本
        document.querySelector('#words').value = ''
        // 给span设置定位样式
        // span.style.position = 'absolute'
        // span.style.left = '600px'
        span.style.top = Math.floor(Math.random() * document.documentElement.clientHeight) + 'px';

        span.className = 'danMu';

        // 在页面中加入span
        document.body.appendChild(span)

        // 设置定时器，让span不断向左移动
        var t = setInterval(function () {
            // 不断给变left值
            span.style.left = parseInt(getComputedStyle(span).left) - 4 + 'px'

            if (parseInt(span.style.left) < -1 * span.offsetWidth) {
                clearInterval(t)
                document.body.removeChild(span)
            }

        }, 50)
    }

</script>

</html>